<template>
  <div id="member-sign-list-page" :style="{
    width:'100%',
    height: (this.getWinSize().height-(43+this.getSafeArea().top))+'px',
    top:(43+this.getSafeArea().top)+'px'
  }">

    <div class="page-title" :style="{
      top:(this.getSafeArea().top)+'px'
    }">
      <div id="back-button" @click="$router.back()">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>签到历史记录</span>
    </div>

    <i-scroller-box class="sign-list" ref="i-scroller-box"
                    url="Member/signList"
                    style="position: relative; margin-top: 2px"
                    :height="getWinSize().height-(this.getSafeArea().top+45)"
                    :style="{width:'100%',top:this.getSafeArea().top+'px'}">
      <template v-slot:list-item="{index,data}">
        <div class="sign-list-item" :key="index">
          <div class="left">
            <div class="datetime" v-text="data.currDay"></div>
          </div>
          <div class="right">
            <el-tag type="success" class="score" v-text="'+'+data.score"></el-tag>
            <el-tag class="add-score b green" v-if="data.addScore>0" v-text="'+'+data.addScore"></el-tag>
          </div>
        </div>
      </template>
    </i-scroller-box>


  </div>
</template>

<script>
import IScrollerBox from '../common/IScrollerBox'

export default {
  name: 'MemberSignList',
  components: {IScrollerBox},
  data: function () {
    return {
      currValue:0,
      logList: [],
      // 搜索表单
      form: {
        actType: '',
        createdAt: ''
      },
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 搜索回调
    search: function (createdTime) {
      this.form.createdTime = createdTime
      this.getList()
    },
    // 请求搜索结果
    getList: function () {
      var $this = this
      var createdAt = $this.form.createdTime
      var form = {createdAt}
      form.sortProp = 'id'
      form.sortOrder = 'DESC'
      this.$refs['i-scroller-box'].getList({
        url: 'Member/signList',
        pageSize:20,
        form: form
      })
    },
  }
}
</script>

<style>
  .sign-list{}
  .sign-list .sign-list-item{ height: 28px; line-height: 28px; border-bottom: 1px solid #f3f3f3; display: flex; width: 98%; margin: 0px auto;}
  .sign-list .sign-list-item>.left{ flex: 1; padding-left: 10px;}
  .sign-list .sign-list-item>.right{flex: 2; text-align: right; color: #555555; padding-right: 5px;}
</style>
